<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./914.css">
</head>

<body>
    <div class="row">
        <div class="col-lg-6">
            <table class="table table-bordered table-hover">
                <thead>
                    <tr>
                        <th>学号</th>
                        <th>性别</th>
                        <th>年龄</th>
                        <th>性别</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
            <ul class="pagination">
                <!-- <li><a href="#">&laquo;</a></li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#" id="last">&raquo;</a></li> -->
            </ul>
        </div>
    </div>
    <script>
        let tbody = document.querySelector('tbody')
        let arr = [];
        for (let i = 1; i <= 51; i++) {
            arr.push({
                id: `${i}`,
                name: `ues${i}`,
                age: `${i}`,
                gender: `${i}`

            })
        }
        console.log(arr);
        let arr_arr = Math.ceil(arr.length / 10);
        let ul = document.querySelector('ul');

        let arr_2 = '';
        for (let j = 1; j <= arr_arr; j++) {
            console.log(j);
            if (j == 1) {
                arr_2 += `<li><a href="#">&laquo;</a></li>`
            }
            arr_2 += `<li><a href="#">${j}</a></li>`
            if (j == arr_arr) {

                arr_2 += `<li><a href="#" id="last">&raquo;</a></li>`
            }
        }
        ul.innerHTML = arr_2
        let number2 = arr.slice(0, 10);
        tbody.innerHTML = number2.map(item => `<tr>
                                <td>${item.id}</td><td>${item.name}</td><td>${item.age}</td><td>${item.gender}</td> 
                                <td id="test">
                                <input type="button" value="修改" class="btn btn-warning" data-id='${item.id}'>
                                <input type="button" value="删除" class="btn btn-danger" data-id2='${item.id}'>
                                </td></tr>`).join('');


        console.log(ul);
        ul.onclick = function (event) {
            console.log(event.target.innerHTML);
            let number = event.target.innerHTML;
            console.log((number - 1) * 10, number * 10 - 1);
            number2 = arr.slice((number - 1) * 10, number * 10);
            console.log(number2);
            tbody.innerHTML = number2.map(item => `<tr>
                                <td>${item.id}</td><td>${item.name}</td><td>${item.age}</td><td>${item.gender}</td> 
                                <td id="test">
                                <input type="button" value="修改" class="btn btn-warning" data-id='${item.id}'>
                                <input type="button" value="删除" class="btn btn-danger" data-id2='${item.id}'>
                                </td></tr>`).join('');
        }
    </script>
</body>

</html>